import React, { useState, useEffect } from 'react'
import { Form, Input, Select } from 'antd';
import './phoneCreate.scss'
import SVG from 'components/SVG';
const loginBtnBg = require('assets/account/btn-bg@2x.png')
const Wechat = require('assets/account/Wechat@2x.png')
const { Option } = Select;
interface LoginProps {
    phoneNum: string,
    createAccount: (params: any) => void,
    returnPage: () => void
}


function PhoneCreate(props: LoginProps) {
    const { phoneNum, createAccount, returnPage } = props;
    const [num, setNum] = useState<number>(60) // 倒计时
    const [isSend, setIsSend] = useState<boolean>(false) // 是否发送验证码
    const prefixSelector = (
        <Select defaultValue='86' style={{
            width: 70
        }}>
            <Option value="86">+86</Option>
            <Option value="87">+87</Option>
        </Select>
    );
    const sendCode = () => {
        if (!isSend) {
            setIsSend(true)
        }
    }
    const getCaptcha = (
        <div className='get-captcha-bnt' onClick={sendCode}>
            {
                num === 60 ? '获取验证码' : num
            }
        </div>
    )
    const buildOld = () => {
        console.log('绑定已有账号');
    }
    useEffect(() => {
        let timer: any = 0;
        if (isSend && num !== 0) {
            timer = setInterval(() => {
                setNum(n => {
                    if (n === 1) {
                        setIsSend(false)
                        clearInterval(timer)
                        setNum(60)
                    }
                    return n - 1
                });
            }, 1000)
        }
        return () => {
            clearInterval(timer)
        };
    }, [isSend])

    return (
        <div className='phoneCreate-box animate-route'>
            <p className='phoneCreate-box-title' >解锁新技能,上天赋树</p>
            <div className='phoneCreate-form'>
                <div onClick={returnPage}>
                    <SVG xlinkHref='icon-fanhui' className='phoneCreate-return' />
                </div>
                <p className='phoneCreate-form-title'>
                    还差一步，完成创建
                            </p>
                <span className='prompt'>绑定手机、设置密码，让你的账户更加安全</span>
                <Form name='phoneCreate' onFinish={createAccount} initialValues={{ phone: phoneNum }}>
                    <Form.Item
                        name="phone"
                    >
                        <Input className='phoneCreate-form-account one' placeholder='请输入手机号' addonBefore={prefixSelector} style={{ width: '100%' }} />
                    </Form.Item>
                    <Form.Item
                        name="captcha">
                        <Input className='phoneCreate-form-account two' placeholder='请输入验证码' addonAfter={getCaptcha} />
                    </Form.Item>
                    <Form.Item
                        name="password" className='phoneCreate-form-input'>
                        <Input.Password placeholder="请输入密码" style={{ width: '100%' }} />
                    </Form.Item>
                    <Form.Item>
                        <button className='phoneCreate-btn' type='submit'>
                            <img src={loginBtnBg} alt="登录按钮背景" />
                                创建Skilltree账户</button>
                        <p style={{ color: '#fff', margin: '16px 0 16px 0' }}>或</p>
                        <button className='phoneCreate-btn build-btn' onClick={buildOld}>
                            绑定已有SkillTree账户</button>
                    </Form.Item>
                </Form>
            </div>
        </div >
    )
}

export default PhoneCreate
